<!--
 * @Author: Wangtao
 * @Date: 2022-09-02 11:38:08
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-14 13:46:17
-->
<template>
  <div class="title-content" :class="{ showOprate: isoprate, maxTitle: maxTitle }">
    <div class="box-title">
      <Title :title="title" />
      <slot name="title-oprate"></slot>
    </div>
    <div class="content" :class="{ adaption: adaptionHeight }">
      <slot name="content"></slot>
    </div>
    <div class="oprate">
      <slot name="oprate"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import Title from '@app/customer/components/title.vue'

export default defineComponent({
  name: 'titleContent',
  props: {
    title: {
      type: String,
      default: ''
    },
    maxTitle: {
      type: Boolean,
      default: true
    },
    adaptionHeight: {
      type: Boolean,
      default: false
    },
    isoprate: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Title
  },
  // ----------------生命周期-----------------------
  setup() {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    // ----------------调用方法-----------------------
    return {}
  }
})
</script>

<style lang="stylus" scoped>
.box-title
  height 20px
  overflow: hidden
  display: flex
  align-items: center
  justify-content: space-between
  :deep(.title)
    margin: 0
.adaption
  height: calc(100% - 20px)
  overflow-y: scroll
  padding-right 24px
.oprate
  display: none
.content
  box-sizing: border-box
.showOprate
  .oprate
    height 48px
    box-sizing: border-box
    border-top: 1px solid var(--mc-gray3-color)
    display: block
    display: flex
    align-items: center
  .adaption
    height: calc(100% - 68px)
    overflow-y: scroll
.nopadding .content.adaption
  padding-right 0
.maxTitle
  .box-title
    height 68px
  .adaption
    height: calc(100% - 68px)
.showOprate
  .adaption
    height: calc(100% - 116px)
</style>
